<template>
  <FormItem :block="block" v-bind="formItemProps" :rules="computeRules" :disabled="inputDisabled">
    <!---->
    <template #default>
      <SubTablePlus
        :is-user-check="isUserCheck"
        :class="{ 'is-readonly': readonly }"
        :value="value"
        :prop="prop"
        :columns="columns"
        :readonly="readonly"
        :disabled="inputDisabled"
        :toolbar-menus="toolbarMenus"
        :handle-menus="handleMenus"
        :bottom-add-button="bottomAddButton"
        :placeholder="computePlaceholder"
        v-bind="inputProps"
        v-on="listeners"
        @selection-change="onSelectionChange"
        @input="val => $emit('input', val)">
        <!--列插槽-->
        <template v-for="item in columns" #[item.prop]="{ row, column, index, prop, required }">
          <slot :name="item.prop" :row="row" :column="column" :index="index" :prop="prop" :required="required"></slot>
        </template>
        <!--表格列-->
        <template #columns="{ columns: cols }">
          <slot name="columns" :columns="cols"></slot>
        </template>
        <!---->
        <template #handle="{ add, remove }">
          <slot :add="add" :remove="remove" name="handle"></slot>
        </template>
        <!---->
        <template #tag="{ column, row, $index }">
          <slot name="tag" :row="row" :column="column" :index="$index"></slot>
        </template>
        <!---->
        <template #handle-column-header="{ column, $index }">
          <slot name="handle-column-header" :column="column" :index="$index"></slot>
        </template>
        <template #toolbar>
          <slot name="toolbar"></slot>
        </template>
        <template #toolbar-left="{ addRow, delRow, refresh }">
          <slot name="toolbar-left" :add-row="addRow" :del-row="delRow" :refresh="refresh"></slot>
        </template>
        <template #toolbar-right>
          <slot name="toolbar-right"></slot>
        </template>
      </SubTablePlus>
    </template>
    <!---->
    <template #error="{ error }">
      <slot name="error" :error="error"></slot>
    </template>
    <!---->
    <template #label>
      <slot name="label"></slot>
    </template>
  </FormItem>
</template>

<script>
  import formInput from './form-input'
  import { filterProperties, normalizeProps } from '@/util'
  import SubTablePlusProps from '@/components/table/sub-table-plus-props'

  const autoBindKeys = Object.keys(SubTablePlusProps.props).filter(
    key => !['value', 'placeholder', 'disabled'].includes(key)
  )

  export default {
    name: 'FormTablePlus',
    mixins: [formInput, SubTablePlusProps],
    props: {
      block: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        selectedRows: []
      }
    },
    computed: {
      inputProps() {
        return filterProperties({ ...normalizeProps(this.$attrs), ...this.$props }, autoBindKeys)
      }
    },
    methods: {
      onSelectionChange(selectedRows) {
        this.selectedRows = selectedRows
      }
    }
  }
</script>
